
const params = {
    pagenum:1, // 页码值
    pagesize:2, // 每页显示多少条数据
    cate_id:'', // 文章分类的id，默认是空
    state:'' // 文章的状态
}

let total = 0 //数据的总数

// 获取文章列表
function render() {
    axios({
        method:'GET',
        url:'http://api-breakingnews-web.itheima.net/my/article/list',
        params,
        //自定义请求头
        headers:{
            Authorization:localStorage.getItem('token')
          }
    }).then(({data:res})=>{
        console.log(res);
        if(res.status === 0){
            $('tbody').empty()
            res.data.forEach((obj)=>{
                let theTr = `<tr>
                            <td>${obj.title}</td>
                            <td>${obj.cate_name}</td>
                            <td>${moment(obj.pub_date).format('YYYY-MM-DD hh:mm')}</td>
                            <td>${obj.state}</td>
                            <th>
                            <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
                                </th>
                        </tr>`;
                        $("tbody").append(theTr);
            })
            //设置文章的总数
            total = res.total

            //设置分页
            setPage()

        }
    })
}

//分页的逻辑代码  必须等到请求成功之后，才能执行
function setPage() {
    layui.use('laypage', function(){
        const laypage = layui.laypage;
        
        //执行一个laypage实例
      //完整功能
      laypage.render({
        elem: 'page' //
        ,count: total  //数据总数 ，从服务器端得到
        ,limit:params.pagesize // 每页显示的条数
        ,limits:[2,3,5,10,20] //每页条数的选择项
        ,curr:params.pagenum // 起始页
        ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
        ,jump: function(obj, first){
            //obj包含了当前分页的所有参数，比如：
            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            console.log(obj.limit); //得到每页显示的条数
            
            //首次不执行
            if(!first){
                console.log('国共是一家');

                //修改params里的页码值和每页的数据
                params.pagenum = obj.curr
                params.pagesize = obj.limit
                console.log(params);
                render()
              //do something
            }
          }
      });
      });
}


$('tbody').on('click','.del',function () {
     const Id = $(this).attr('myid')
     layer.confirm('确定删除吗？', {icon: 3, title:'温馨提示'}, function(index){
        axios({
            method:'GET',
            url:`http://api-breakingnews-web.itheima.net/my/article/delete/${Id}`,
            headers:{Authorization:localStorage.getItem('token')}
        }).then(({data:res})=>{
            layer.msg(res.message)
            if(res.status === 0){
                render() //重新渲染
                layer.close(index);
            }
        })
      });
})

//获取文章分类列表
function getCates() {
    axios.get('http://api-breakingnews-web.itheima.net/my/article/cates',{headers:{Authorization:localStorage.getItem('token')}}).then(({data:res})=>{
        console.log(res);
        //判断请求成功
      layer.msg(res.message)
        if(res.status === 0){
        // /默认一进来要添加一个option
        $('select[name="category"]').append(`<option value="" lay-verify="cate">请选择分类</option>`)
          // 遍历数据 渲染
        res.data.forEach((obj)=>{
            const theOption = `<option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`;
            $('select[name="category"]').append(theOption)
        })
        //等循环结束之后，在执行form.render() 手动去刷新一下当前的select框的数据,因为option标签是动态插入的
        layui.form.render('select','category')
    }
    }) 
}
getCates()

// 渲染页面
render()

// 1.分别获取文章的分类和状态
// 2.修改params参数里的cate_id 和 state
// 3.发送请求，渲染页面
$('form').on('submit',function (e) {
     e.preventDefault()
     // 文章的分类
const cate_id = $('select[name="cate_id"]').val()
    // 文章的的状态
const state = $('select[name="state"]').val()     
console.log(cate_id,state);
//修改查询参数
params.cate_id = cate_id
params.state = state

// 发送请求
render()
})